<template>
  <div>
    <el-col :span="4" :xs="24">
      <el-card class="el-card-demo">
        <template v-slot:header>
          <div style="text-align:center;color: #71c4ef;">
            <p>今日操作日志</p>
          </div>
        </template>
        <el-timeline center style="max-width: 400px">
          <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :icon="activity.icon"
              :type="activity.type"
              color="#921e5e"
              size="large"
              :hollow="activity.hollow"
              :timestamp="activity.operTime"
          >
            <el-card style="margin: 5px">
              <span>操作内容：{{ activity.title }}</span><br>
              <span>操作ip：{{ activity.operIp }}</span><br>
              <span>操作状态：<el-tag :type="activity.status === 0?'success':'danger'">{{
                  activity.status === 0 ? "成功" : "失败"
                }}</el-tag></span><br>
              <span v-if="activity.status !== 0 && activity.errorMsg !== null">失败原因：{{
                  activity.errorMsg
                }}</span><br v-if="activity.status !== 0 && activity.errorMsg !== null">
              <span>消耗时间：{{ activity.costTime }}秒</span><br>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </el-col>
  </div>
</template>

<script setup name="Index">
import {getOperlog} from "@/api/system/user.js";
import {onMounted} from "vue";

const activities = ref([]);
const {proxy} = getCurrentInstance();

function getOperInfo() {
  getOperlog().then(response => {
    activities.value = response.logs;
  })

}

onMounted(() => {
  getOperInfo();
})

</script>

<style scoped lang="scss">
.el-card-demo {
  margin-left: 40px;
  margin-top: 50px;
  max-height: 80vh;
  width: 500px;
  max-width: 500px;
  overflow: auto;
  transition: transform 0.3s; /* 添加过渡效果，使得变化更加平滑 */
  border-radius: 15px;
  background-color: #fffefb;
}

.el-card-demo:hover {
  transform: scale(1.05); /* 放大1.1倍 */
}


.wel-div {
  background-color: #d4eaf7;
  width: 100%;
  height: 100px;
  transition: transform 0.3s; /* 添加过渡效果，使得变化更加平滑 */
  border-radius: 15px;
}

.wel-div:hover {
  transform: scale(1.01); /* 放大1.01倍 */
}

.echarts-div1 {
  background-color: #71c4ef;
  width: 50%;
  height: 450px;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  border-radius: 15px;
  text-align: center;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  border: 1px solid #ccc; /* 可选：用于可视化边界 */
  transition: transform 0.3s; /* 添加过渡效果，使得变化更加平滑 */
}

.echarts-div1:hover {
  transform: scale(1.05); /* 放大1.05倍 */
}

.echarts-div2 {
  background-color: #cccbc8;
  width: 50%;
  height: 400px;
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  border-radius: 15px;
  transition: transform 0.3s; /* 添加过渡效果，使得变化更加平滑 */
  text-align: center;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  border: 1px solid #ccc; /* 可选：用于可视化边界 */
}

.echarts-div2:hover {
  transform: scale(1.05); /* 放大1.05倍 */
}

.index-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.aside-container {
  background-color: #f5f4f1;
  height: 100%;
  color: aquamarine;
  text-align: center;
}

.el-container {
  height: 100%;
}

.el-header, .er-footer {
  padding: 0;
}
</style>

